<template>
    <div>
        <h3 class="text-lg my-4">{{ title }}</h3>
        <div class="grid grid-cols-2 md:grid-cols-8 gap-4 my-4">
            <nuxt-link class="p-4 bg-green-100 rounded-lg" v-for="(item, index) in list" :key="index"
                :to="item.link">
                <img :src="item.image" class="w-32 h-32 rounded-lg mx-auto hover:scale-125" />
                <div class="text-md text-center mt-4">{{ item.title }}</div>
            </nuxt-link>
        </div>
    </div>
</template>
<script setup>
defineProps({ title: String, list: Array })
</script>